<!--广告发布-->
<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="名称" prop="name">
        <el-input class="modal-input" v-model="form.name" placeholder="请输入广告名称"/>
      </el-form-item>
      <el-form-item label="广告位置" prop="position">
          <el-radio v-model="form.position" :label="0">首页轮播</el-radio>
          <el-radio v-model="form.position" :label="1">其他</el-radio>
      </el-form-item>
      <el-row>
        <el-button size="mini" @click="addImage">添加轮播</el-button>
      </el-row>
      <el-row class="image-group-row" v-for="(item,index) in images" :key="index">
        <el-col :span="2">
          <div>轮播第{{item.sortNum}}帧 </div>
          <el-button size="mini" @click="deleteImg(index)">删除</el-button>
        </el-col>
        <el-col :span="4"> <ImageUpload :limit="1" v-model="item.imgUrl"></ImageUpload></el-col>
        <el-col :span="12">
            <el-input class="modal-input" v-model="item.url" placeholder="请输入广告链接"/>
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" v-loading.fullscreen.lock="loading">点击发布</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {
  getAdvertisement,
  addAdvertisement,
  updateAdvertisement
} from '@/api/content/advertisionAdd'
import { deepClone } from '@/utils'
export default {
  name: 'Package',
  components: {},
  data() {
    return {
      id:this.$yun.v(this.$route.query, 'id'),
      loading: false,
      images: [],
      form: {
        name: null,
        position: 0,
      },
      rules: {
        name: [
          { required: true, message: '广告名称不能为空', trigger: 'blur' }
        ],
        position: [
          { required: true, message: '请选择广告位置', trigger: 'blur' }
        ],
      }
    }

  },
  created() {
    if(this.id){
      console.log(this.id)
      this.getDetails();
    }
  },
  methods: {
    // 添加轮播
    addImage(){
      let length = this.images.length;
     this.images.push({sortNum:length+1,imgUrl:'',url:''})
    },
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          // this.loading = true;
          let setData = { ...this.form,platformAdvertisementDetailDtos:this.images}
          if(this.id){
            updateAdvertisement({ ...setData,id: this.$yun.v(this.$route.query, 'id')}).then(response => {
              this.loading = false;
              this.$modal.msgSuccess('修改成功');
            })
          }else {
            addAdvertisement(setData).then(response => {
              this.loading = false;
              this.$modal.msgSuccess('发布成功');
            })
            // 关闭当前tabs
            this.$store.dispatch('tagsView/delView', this.$route)
            // 跳转路由
            this.$router.replace({ path: '/content/advertisionList' })
          }
        }
      })
    },
    // 查询广告详情
    getDetails() {
      getAdvertisement(this.id).then(response => {
        this.form = response.data;
        this.images = response.data.platformAdvertisementDetailVOS
      })
    },
    //删除已添加轮播
    deleteImg(index){
      let imgList = deepClone(this.images);
      imgList.splice(index,1);
      this.images = imgList;
    }
  }
}
</script>
<style scope lang="scss">
.image-group-row {
  padding: 20px 0 0 80px;
}
</style>
